<template>
  <div>
    <a-descriptions style="padding: 0 20px">
      <a-descriptions-item label="参与人">XXX</a-descriptions-item>
    </a-descriptions>
    <a-descriptions layout="vertical" style="padding: 0 20px">
      <a-descriptions-item label="描述"><div class="desc">示例描述</div></a-descriptions-item>
    </a-descriptions>
    <p style="margin-left: 20px; font-size: 20px; color: #000; font-weight: 900">属性</p>
    <div class="attribute flex" style="padding: 5px 0px; flex-wrap: wrap" @click="emitParent">
      <div v-for="(item, index) in listAttr" :key="index" :span="12" style="margin: 10px 20px; cursor: pointer">
        <div v-if="item.isShow == true" class="flex">{{ item.label }}:&ensp;&ensp;{{ item.value }}</div>
      </div>
    </div>
    <a-descriptions title="基础信息" style="padding: 0 20px">
      <a-descriptions-item label="所属项目">项目A</a-descriptions-item>
      <a-descriptions-item label="创建日期">2023-01-01</a-descriptions-item>
      <a-descriptions-item label="创建者">用户甲</a-descriptions-item>
      <a-descriptions-item label="更新日期">2023-01-01</a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup lang="ts">
const listAttr = reactive([
  {
    label: "状态",
    value: "进行中",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "负责人",
    value: "负责人",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "优先级",
    value: "普通",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 3,
  },
  {
    label: "发布日期",
    value: "2023-01-01",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 4,
  },
])
const emitParent = () => {
  emit("attributeList", listAttr)
}
//定义要发送的事件名称，如 aList
const emit = defineEmits(["attributeList"])
// const emitParentDel = ()=>{

// }
defineExpose({
  // emitParentDel
})
</script>

<style seoped>
.desc {
  border: 1px solid #e9e9e9;
  height: 100px;
  width: 100%;
  padding: 5px;
  border-radius: 3px;
}
.attribute {
  border: 2px dashed rgb(154, 154, 154);
}
.attribute:hover {
  background-color: rgba(51, 143, 229, 0.1);
}
</style>
